<template>
  <div class="common-layout">
    <el-container>
      <!-- 左侧 -->
      <el-aside >
        <h1>书城管理系统</h1>
        <el-menu :router="true"> 
         <el-menu-item index="/books">
         <el-icon><icon-menu /></el-icon>
         <template #title>商品管理 </template>
        </el-menu-item>

         <el-menu-item index="/orders" >
         <el-icon><document /></el-icon>
         <template #title>订单管理</template>
        </el-menu-item>

         <el-menu-item index="/cars">
         <el-icon><setting /></el-icon>
         <template #title>购物车管理</template>
        </el-menu-item>

        <el-menu-item index="/users">
         <el-icon><setting /></el-icon>
         <template #title>会员管理</template>
        </el-menu-item>
  </el-menu>




      </el-aside>

      <el-container>
        <!-- 头部 -->
        <el-header>
          <div></div>
          <div>
            <el-button type="primary">退出</el-button>
          </div>

        </el-header>
        <!-- 内容 -->
        <el-main>
          <!-- 二级路由 -->
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
.common-layout {
  height: 100vh; 
}

.el-container {
  height: 100%;
}
.el-aside {
  width: 20%;
   background: pink;
}
.el-aside h1 {
  text-align: center;
  height: 60px;
  line-height: 60px;
  font-size: 1.5rem;
}

.el-header {
  height: 60px;
   background: pink;
  display: flex;
  justify-content: space-between;
}
.el-main {
  background-color:snow;
  height: calc(100% - 70px); 
} 
.el-header >div{ 
  line-height: 60px;
}


</style>

